<template>
  <el-radio-group style="width: 100%" v-model="propsValue" :size="realSize" :disabled="realDisabled"
    :validate-event="false">
    <template v-for="item in state.options">
      <el-checkbox-button v-if="props.button" :key="item[realProps.value]" :label="item[realProps.value]"
        :value="item[realProps.value]" :disabled="item[realProps.disabled] === '1'">
        {{ item[realProps.label] }}
      </el-checkbox-button>
      <el-checkbox v-else :key="'c' + item[realProps.value]" :label="item[realProps.value]"
        :value="item[realProps.value]" :disabled="item[realProps.disabled] === '1'">
        {{ item[realProps.label] }}
      </el-checkbox>
    </template>
  </el-radio-group>
</template>

<script setup name="customCheckboxCode">
import { useFormItem, useFormItemInputId, useFormSize, useFormDisabled } from 'element-plus'
const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean],
    default: ''
  },
  dataList: {
    type: Array,
    default: () => []
  },
  button: Boolean,
  props: {
    type: Object,
    default: () => ({})
  },
  code: {
    type: String,
    default: ''
  },
  validateEvent: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: ''
  },
  disabled: Boolean
})
const { form, formItem } = useFormItem()
const { inputId } = useFormItemInputId(props, { formItemContext: formItem })
const formSize = useFormSize()
const formDisabled = useFormDisabled()
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:modelValue', 'change'])
const propsValue = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
    nextTick(() => {
      emit('change', value)
    })
  }
})
const realSize = computed(() => {
  return props.size || formSize.value
})
const realDisabled = computed(() => {
  return props.disabled || formDisabled.value
})
const realProps = computed(() => {
  return Object.assign({ label: 'label', value: 'value', disabled: 'status' }, props.props)
})
const state = reactive({
  options: []
})
const valueWatch = watch(() => props.modelValue, (v) => {
  nextTick(() => {
    if (props.validateEvent) {
      formItem?.validate?.('change').catch((err) => console.log(err))
    }
  })
})
const codeWatch = watch(() => props.code, (v) => {
  v && getDataList()
})
const dataListWatch = watch(() => props.dataList, (v) => {
  v && (state.options = v)
})
const getDataList = () => {
  const dict = proxy.useDict(props.code)
  state.options = dict[props.code]
}
(props.code || props.group) && getDataList()
props.dataList.length && (state.options = props.dataList)
defineExpose({
  getValueLabel: () => {
    return proxy.selectDictLabel(state.options.value, propsValue)
  },
})
</script>

<style lang="less" scoped></style>